<template>
  <div class="setting-card">
    <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="150px">
      <div class="card">
        <div class="title">邮件服务器</div>
        <el-form-item label="邮件服务器" prop="server">
          <el-input v-model="form.server" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮件服务器地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱账号" prop="email">
          <el-input v-model="form.email" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="邮箱端口" prop="port">
          <el-input v-model="form.port" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="是否启用SSL">
          <el-switch v-model="form.isSsl"></el-switch>
        </el-form-item>
        <el-form-item label="是否启用邮箱配置">
          <el-switch v-model="form.isEmial"></el-switch>
        </el-form-item>
      </div>
      <div class="card">
        <div class="title">短信服务器</div>
        <el-form-item label="短信服务器" prop="noteServer">
          <el-input v-model="form.noteServer" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="短信服务器地址" prop="noteAddress">
          <el-input v-model="form.address" placeholder="请输入"></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
  <div class="setting-foot">
    <el-button type="primary" @click="submitForm(ruleFormRef)">确认更新</el-button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const ruleFormRef = ref();
const form = ref({
  server: "",
  address: "",
  email: "",
  port: "",
  isSsl: false,
  isEmial: false,
  noteServer: "",
  noteAddress: "",
});
const rules = ref({
  server: [
    { required: true, message: "请输入邮件服务器", trigger: "blur" },
  ],
  address: [
    { required: true, message: "请输入邮件服务器地址", trigger: "blur" },
  ],
  email: [
    { required: true, message: "请输入邮箱账号", trigger: "blur" },
  ],
  port: [
    { required: true, message: "请输入邮箱端口", trigger: "blur" },
  ],
  noteServer: [
    { required: true, message: "请输入短信服务器", trigger: "blur" },
  ],
  noteAddress: [
    { required: true, message: "请输入短信服务器地址", trigger: "blur" },
  ]
});
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="scss" scoped>
.setting-card {
  .card+.card {
    margin-top: 16px;
  }

  .el-input,
  .el-select {
    width: 290px;
  }

  .card {
    border: 1px solid #e4e4e4;
    padding: 24px;
  }
}

.setting-foot {
  margin-top: 24px;
  text-align: right;
}
</style>